<template>
 <div class="header">
   <van-nav-bar
	  title="个人认证"
	  style="background: #4C9FFD;"
	  left-arrow
	  @click-left="onClickLeft"
	 />
    <div class="changeImg">
	 	<img src="../../assets/student.png"  v-show="student_show" @click="studentshow"/>
	 	<img src="../../assets/changestudent.png" v-show="!student_show" @click="studentshow"/>
	 	<span style="display: inline-block;line-height:16vh;color:#CCCCCC;">或</span>
	 	<img src="../../assets/teacher.png"  v-show="teacher_show" @click="teacher_content">
	 	<img src="../../assets/changeteacher.png"  v-show="!teacher_show" @click="teacher_content" />
    </div>
    <van-cell-group>
	  <van-field
	    v-model="realName"
	    label="真实姓名"

	    right-icon="question-o"
	    placeholder="请输入姓名和身份证保持一致"

	  />
     <van-field
     	 :maxlength="18"
	    v-model="idCardNo"
	    label="身份证号"
	    right-icon="question-o"
	    readonly="readonly"
	    placeholder="请输入个人身份证号"
        @focus="show_number_func"
     />


      <!--<van-popup
	  v-model="show"
	  position="bottom"
	  :style="{ height: '40%' }"
  	>-->
   <van-number-keyboard
        :show="show"
        extra-key="."
        close-button-text="完成"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
      />
  <!--</van-popup>-->

      <van-field
        readonly
        clickable
        v-show="time_show"
        label="毕业时间"
        :value="graduationTime"
        placeholder="请选择毕业时间"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>

	  <div class="uploader_img" v-show="photo_show">
	  	 <van-uploader
		      v-model="idPositive"
		      multiple
		      :max-count="1"
          :after-read="afterReadPositive"
    	/>

	    <van-uploader
		      v-model="idReverse"
		      multiple
		      :max-count="1"
          :after-read="afterReadReverse"
	    />
	  </div>

	    <van-button
	        	type="primary"
	        	size="large"
            @click="sub_info"
	        	style="background: #4C9FFD;border:1px solid #4C9FFD;width: 90%;border-radius: 20px;margin-top:25px">
	        	提交认证
	    </van-button>
	  </van-cell-group>
  </div>
</template>
<script>


export default {
	data(){
		return{
        realName:'',
        idCardNo:'',
        graduationTime: '',
        showPicker: false,
        columns: ['2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027'],
			  photo_show:true,
			  teacher_show:true,
			  student_show:false,
        time_show:true,
        idPositive: [],
        idReverse:[],
        show:false,
        idPositiveUrl:'',
        idReverseUrl:''

		}
	},
	methods: {
      //
      afterReadPositive(file) {
          const that = this;
          let formData = new FormData();
          formData.append("fileName",file.file);
          that.$sendFileRequest('/comm/upload',formData).then(function(res){
              if(res.data.code ==0){
                  that.idPositiveUrl = res.data.result.relativeFilePath;
                  alert(that.idPositiveUrl)
              }
          })
      },
      afterReadReverse(file) {
          const that = this;
          let formData = new FormData();
          formData.append("fileName",file.file);
          that.$sendFileRequest('/comm/upload',formData).then(function(res){
              if(res.data.code ==0){
                  that.idReverseUrl = res.data.result.relativeFilePath;
                  alert(that.idReverseUrl)
              }
          })
      },
      sub_info(){
          if(this.realName == ''){
              this.$toast("请输入真实姓名");
              return false;
          }
          if(this.idCardNo == ''){
              this.$toast("请输入个人身份证号");
              return false;
          }
          var userType="";
          if(this.time_show){
              userType="0";
              if(this.graduationTime == ''){
                  this.$toast("请选择毕业时间");
                  return false;
              }
          }


          if(this.idPositiveUrl == ''){
              this.$toast("请上传身份证正面");
              return false;
          }
          if(this.idReverseUrl == ''){
              this.$toast("请上传身份证反面");
              return false;
          }


          let user = JSON.parse(localStorage.getItem('user'));
          console.log(user);
          let p = "userId="+user.userId+"&enterType=0&graduationTime="+this.graduationTime+"&identityName="+this.realName+"&identity="+this.idCardNo+"&idPositiveUrl="+this.idPositiveUrl+"&idReverseUrl="+this.idReverseUrl+"&userType="+userType;
          console.log(p);
          const that = this;
          this.$sendRequest('/enterRegister/enterRegisterInfo',p).then(function(res){
              console.log(res.data);
              if(res.data.code==0){
                  that.$toast("提交成功");
                  that.$router.push({
                      path: '/myself'
                  })
              }
          })

      },
      show_number_func(){
        this.show = true;
      },
      onInput(value) {
          this.idCardNo = this.idCardNo+value;
      },
      onDelete() {
          var v = this.idCardNo;
          var l = v.length;
          this.idCardNo = v.substring(0,l-1);
      },
      onConfirm(value) {
          this.graduationTime = value;
          this.showPicker = false;
          console.log(this.graduationTime);
      },
        //老师
      teacher_content(){
          this.student_show = true;
       	  this.teacher_show = false;
       	  this.time_show = false;
       },
	    onClickLeft() {
          this.$router.back(-1);
	    },

	    //学生头像切换
	    studentshow(){
          this.student_show = false;
       	  this.teacher_show = true;
       	  this.time_show = true;
	    },


  }
}
</script>
<style scoped="scoped">
	.data_picker_color{
		color: #FF4242;
		font-size: 20px;
		margin-left: 2vh;
	}
	.uploader_img{
		height: 14vh;
		margin-top: 2vh;
		display: flex;
		justify-content: space-between;
		margin: 12px;
	}
	.uploader_img >>> .van-uploader{
		height: 100%;
	}
	.uploader_img >>> .van-uploader__wrapper{
		height: 100%;
	}
	.uploader_img>>>.van-uploader__upload:nth-child(1){
		background: url(../../assets/idcard.png) no-repeat center center;
	    background-size: cover;
	    height: 100%;
	}

	.uploader_img >>> .van-icon-plus{
		display: none;
	}
	.uploader_img >>> .van-image{
		width: 100%;
		height: 100%;
	}


	.uploader_img>>>.van-uploader__upload:nth-child(2){
		background: url(../../assets/fan.png)) no-repeat center center;
		background-size: cover;
	}

	.uploader_img >>>.van-uploader{
		width: 50%;
	}
	.uploader_img>>>.van-uploader__upload{
		width: 100%;
	}
  .header >>> .van-icon{
  	color: #fff;
  }
  .header >>> .van-nav-bar__title{
  	color: #fff;
  }
  .header img{
  	width: 95%;
  }
  .uploader_img >>> .van-uploader__upload{
		margin:6px 8px !important;
	}
	.uploader_img >>> .van-uploader .van-image__img{
		padding-top: 0.8vh;
	}
  .changeImg{
  	display: flex;
  	margin-top: 8vh;
  	justify-content: space-around;
  	margin: 24px;

  }
  .changeImg img{
  	width: 24vw;
    height: 19vh;
  }



</style>
